<template>
  <el-header>
    <div>
      人事管理系统
    </div>
    <div class="display-index-header-right">

      <span style="font-size: 0.8em">{{name}}</span>

      <el-popover
          placement="bottom"
          :width="120"
          trigger="click"
          :hide-after="500"
      >
        <template #reference>
          <img :src="props.imgBase64" alt="图片" class="display-index-header-right-img">
        </template>
        <div>
          <el-icon><UserFilled /></el-icon>
          个人中心
        </div>
        <div>
          <el-icon><Message /></el-icon>
          我的消息
        </div>
        <div>
          <el-icon><SwitchButton /></el-icon>
          退出登录
        </div>
      </el-popover>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { Message ,UserFilled ,SwitchButton} from '@element-plus/icons-vue'
import {ref} from "vue";
const props = defineProps({
  imgBase64:{
    type: String,
    default: ''
  },
  name:{
    type: String,
    default: '管理员'
  }
})
const visible = ref(false)

</script>

<style scoped lang="scss">
.el-header{
  grid-column: 1 /3;
  background-color: $bg-color-primary;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: $color-primary;
  font-size: 1.5em;
  letter-spacing: 1px;
  font-family: '华文楷体','Microsoft YaHei', '微软雅黑', 'SimSun', '宋体', 'Arial', sans-serif;
  font-weight: bolder;
}
.display-index-header-right{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.display-index-header-right-img{
  border-radius: 50%/50%;
  margin: 5px;
  height: 50px;
  width: 50px;
  box-sizing: border-box;
}
.el-popper{
  border-radius: 5px /5px;
  background-color: $tooltip-bg;
  border: 1px #bdbdbd solid;
  box-shadow: 0 0 5px #6f6f6f;
  display: grid;
  grid-template-rows: repeat(auto-fit,1fr);
}
.el-popper div{
  padding: 5px 2px 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #666666;
  cursor: pointer;
  transition: all .2s;
  overflow: hidden;
}
.el-popper>div:hover{
  color: #000;
  background-color: $select-bg-color;
  transform: translateY(-1px);
  box-shadow: 0 2px 0 1px rgba(80,80,80,.5);
}
.el-icon{
  width: 1em;
  height: 1em;
  transform: scale(1.2);
  display: inline-block;
  margin-bottom: 4px;
}
</style>